<template>
  <div class="content">
    <!-- 公共组件-每个页面必须引入 -->
    <public-module></public-module>
	<div class="crc-page">
	    <div class="crc-top" v-if="info.isTop == 1 && info.topInfo && info.topInfo[0]">
			<img :src="info.topInfo[0]['adImg']" style="width:100%;" :style="{height:info.topInfo[0]['height'] + 'rpx'}"/>
		</div>
		
		<div class="crc-con-div">
			<div class="crc-addOrder-div" @click="toaddInquiry('置顶下单')" :style="{'background-image':'url('+info.imgMTop+')'}">
				<div class="crc-top-left"></div>
				<div class="crc-top-right">
					<div class="crc-right-btn" :style="{color:info.color}">立即下单</div>
				</div>
			</div>
			
			<div class="crc-introduction" style="margin-top:32rpx" v-if="info.isIntroduce == 1">
				<u-swiper
					radius='20rpx'
					keyName="adImg"
					:list="info.introduceInfo"
					:height="info.introduceInfo[0]['height']+'rpx'"
					@click="clickAD"
					indicator
					indicatorMode="line"
				></u-swiper>
			</div>
			
			<div class="crc-business" v-if="goodslist.length > 0">
				<div class="business-title">主营产品</div>
				<div class="business-subTitle">MAIN PRODUCTS</div>
				<div style="max-height: 890rpx;overflow-y: auto">
					<div class="business-item" v-for="(item,index) in goodslist" :key="index" @click="toInfo(item)">
						<div class="business-img">
							<img :src="item.goodsPic" style="width:100%;height:100%;object-fit: cover;"/>
						</div>
						<div class="business-con">
							<div class="goods-top">
								<div class="goods-name">{{item.goodsName}}</div>
							</div>
							<div class="goods-arrt"> 库存：{{item.stock}}</div>
							<div class="goods-arrt"> 交货地址：{{item.area}}</div>
						</div>
					</div>
				</div>
				
			</div>
			
			<div class="crc-introduction" style="margin-top:32rpx" v-if="info.isFeature == 1 && info.featureProductInfo && info.featureProductInfo.length > 0">
				<u-swiper
					radius='20rpx'
					keyName="adImg"
					:list="info.featureProductInfo"
					:height="info.featureProductInfo[0]['height']+'rpx'"
					@click="clickAD"
					indicator
					indicatorMode="line"
				></u-swiper>
			</div>
			
			
			<!-- <div class="crc-product" v-if="info.isFeature == 1 && info.featureInfo && info.featureInfo.length == 4 && info.featureBgInfo && info.featureBgInfo[0]" :style="{'background-image': 'url('+ info.featureBgInfo[0]['adImg']+')',height:info.featureBgInfo[0]['height']+'rpx'}">
				<div class="product-title">产品特性</div>
				<div class="product-subTitle" v-html="info.featureContent"></div>
				<div class="product-list">
					<div class="product-item" v-for="(item,index) in info.featureInfo" :key="index">
						<img :src="item.adImg" class="img" @click="preview(index)"/>
					</div>
				</div>
			</div>
			
			<div class="crc-product" v-if="info.isFeature == 1 && info.featureInfo && info.featureInfo.length == 1 && info.featureBgInfo && info.featureBgInfo[0]" :style="{'background-image': 'url('+ info.featureBgInfo[0]['adImg']+')',height:info.featureBgInfo[0]['height']+'rpx'}">
				<div class="product-title">产品特性</div>
				<div class="product-subTitle" v-html="info.featureContent"></div>
				<div style="text-align: center;padding-top:40rpx">
					<img :src="item.adImg" class="img" 
					style="display: inline-block;"
					@click="preview(index)" v-for="(item,index) in info.featureInfo" :key="index" :style="{width:item.width+'rpx',height:item.height+'rpx'}"/>
				</div>
				
				
			</div> -->
			
			<div class="crc-product-report" v-if="info.isReport == 1">
				<u-swiper
					radius='20rpx'
					keyName="adImg"
					:list="info.reportInfo"
					:height="info.reportInfo[0]['height']+'rpx'"
					@click="clickAD"
					indicator
					indicatorMode="line"
				></u-swiper>
			</div>
			
			<div class="crc-video" v-if="info.isVideo == 1">
				<div class="crc-block-title">
					<u-icon name="play-circle-fill" size="24" :color="info.color"></u-icon>
					<span style="font-size: 32rpx;font-weight: bold;padding-left:10px">品牌视频</span>
				</div>
				<div class="video-big" @click="showVideo(info.videoInfo[0]['video_url'])">
					 <div class="video-text" v-if="info.videoInfo && info.videoInfo[0]">{{info.videoInfo[0]['video_title']}}</div>
					 <img :src="info.videoInfo[0]['video_image']" style="width:100%;height:100%;object-fit: cover" v-if="info.videoInfo && info.videoInfo[0]"/>
				</div>
				<div class="video-list">
					<div class="video-item" v-for="(item,index) in info.videoInfo" :key="index"  v-if="index > 0" @click="showVideo(item['video_url'])">
						 <img :src="item.video_image" style="width:100%;height:100%;object-fit: cover">
						  <div class="video-text" >{{item['video_title']}}</div>
					</div>
				</div>
			</div>
			<div class="crc-video" v-if="info.isFeedback == 1">
				<div class="crc-block-title">
					<u-icon name="grid-fill" size="24" :color="info.color"></u-icon>
					<span style="font-size: 32rpx;font-weight: bold;padding-left:10px">{{info.title.indexOf('华润') == -1 ? '应用领域' : '用户反馈'}}</span>
				</div>
				<div class="video-list2">
					<div class="video-item2" v-for="(item,index) in info.feedbackInfo" :key="index" @click="showVideo(item['video_url'])">
						<div class="item2-img">
							<img :src="item.video_image" style="width:100%;height:100%;object-fit: cover"/>
						</div>
						<div class="item2-text">
							<div class="item2-big-text">{{item.video_title}}</div>
							<div class="item2-small-text">{{item.video_content}}</div>
							<div class="item2-btn" :style="{'color':item.video_url ? '#8B8B8B' : '#fff' }">查看详情</div>
						</div>
					</div>
					
				</div>
				
			</div>
			
			<div class="crc-video" v-if="info.isInteraction == 1">
				<div class="crc-block-title">
					<u-icon name="chat-fill" size="24" :color="info.color"></u-icon>
					<span style="font-size: 32rpx;font-weight: bold;padding-left:10px">互动专区</span>
					<div class="crc-right-title" @click="showPop">
						<u-icon name="file-text" :color="info.color"  size="20"></u-icon>
						<!-- <img src="https://pic.moresu.com/1723866010015" style="width:26rpx;height:26rpx"/> -->
						<span style="font-size: 24rpx;font-weight: bold;padding-left:10rpx">我要提问</span>
					</div>
				</div>
				<div class="interaction-list">
					<div class="interaction-item" v-for="(item,index) in list" :key="index">
						<div class="interaction-item-top">
							<img :src='item.avatar' style="height:80rpx;width:80rpx;object-fit: cover;border-radius: 50%;"/>
							<span class="item-top-text">{{item.userName}}</span>
						</div>
						<div class="interaction-item-con">{{item.content}}</div>
						<div class="interaction-item-imgs">
							<div class="img-item" v-for="(ee,ii) in item.img" :key="ee" style="margin-right:24rpx;margin-top:24rpx;">
								<img :src="ee" style="width: 208rpx;height: 208rpx;border-radius: 20rpx;object-fit: cover" @click="preview2(ii,index)"/>
							</div>
						</div>
						<div class="item-reply" v-for="(ee,ii) in item.reply" :key="ii">
							<div class="reply-con">
								<span class="reply-title">平台回复</span>{{ee.content}}
							</div>
							<div class="interaction-item-imgs">
								<div class="img-item" v-for="(eee,iii) in ee.img" :key="eee" style="margin-right:24rpx;margin-top:24rpx;">
									<img :src="eee" style="width: 208rpx;height: 208rpx;border-radius: 20rpx;object-fit: cover" @click="preview3(iii,ii,index)"/>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			
			<div style="padding:40rpx 0;" v-if="info.isInteraction == 1">
				<u-loadmore :status="status"></u-loadmore>
			</div>
			
			<div class='crc-bottom' @click="toaddInquiry('沉底下单')" :style="{'background-image':'url('+info.imgMBottom+')'}">
				<div class="bottom-text"></div>
				<div class="bottom-btn" :style="{color:info.color}">立即下单</div>
				<div class="bottom-img">
					<img src="https://pic.moresu.com/FiGlvCTS145wbDQvAmnsji2AFm6f" style="width:72rpx;height:68rpx;"/>
				</div>
			</div>
			
		</div>

	</div>
	
	<u-popup :show="show2" mode="center"  @close="closePop" >
	    <video :src="vidoSrc" v-if="show2"></video>
	</u-popup>
	
	<u-popup :show="show" mode="bottom" :round="10" @close="closeShow" >
	    <div class="popupTitle">
			<div style="vertical-align: middle;display: inline-block;">
				<u-icon name="file-text" :color="info.color" size="26" ></u-icon>
			</div>
			
			<!-- <img src="https://pic.moresu.com/1723874522794" style="width:34rpx;height:34rpx;vertical-align: middle;display: inline-block;"/> -->
			<span style="padding-left:10rpx;vertical-align: middle;">我要提问</span>
		</div>
		<div class="popup-con">
			<u--form labelPosition="top" :model="form" :rules="rules" ref="form" labelWidth="100" errorType="toast">
				<u-form-item label="问题描述" prop="content" :borderBottom="false" labelPosition="top" required>
					<u--textarea v-model="form.content" placeholder="请输入问题" ></u--textarea>
				</u-form-item>
				<u-form-item label="上传图片" prop="brandAgency" :borderBottom="false" labelPosition="top">
					<u-upload url="https://upload.qiniup.com" @delete="deleteImg($event)" :maxCount="6" :fileList="form.img" @afterRead="handleAfterRead2($event)"></u-upload>	 
				</u-form-item>
			</u--form>
		</div>
		<div class="u-flex popup-bottom">
			<u-button text="取消"  shape="circle" @click="closeShow"></u-button>
			<u-button text="确认"  shape="circle" :color="info.color" @click="saveForm" :loading="btnLoading"></u-button>
		</div>
	</u-popup>
	
  </div>
</template>

<script>
	const defaultForm = {
	  "img": [],         //反馈图片 图片数组
	  "content": "",        //反馈内容
	};
  import {specialDetail,getInteractionList,pageSeo,addInteractionData,topicSubClassList,shareCode,pcGoodsList} from '@/config/api.js';
  import {imgCheck} from '@/plugins/upload/upload.js';
  import store from '@/store';
  import{saveShareUid}  from '@/plugins/utils.js';
  const log = require('@/plugins/log.js');
  export default {
    components: {
     

    },
    data() {
      return {
	     info:{},
	     show:false,
		 form: JSON.parse(JSON.stringify(defaultForm)),
		 btnLoading:false,
		 rules:{
		   content: [{
				required: true,
				message: '请输入评价描述',
				// 可以单个或者同时写两个触发验证方式
				trigger: ['blur', 'change']
			}]
		},
		specialId:'',
		advertise2:[],
		show2:false,
		vidoSrc:'',
		status: 'loadmore',
		list: [],
		pageNum: 0,
		pageSize:10,
		count:0,
		shareTitle:'',
		goodslist:[],
		sourceFrom:'',
      }
    },

	async onLoad(options) {
    	await this.$onLaunched;	
        this.specialId = options.specialId;
		this.sourceFrom=options.from?options.from:'';
		let adType = 1
		// #ifdef H5
		adType = 2
		// #endif
		specialDetail({specialId:options.specialId,adType}).then((res)=>{
			this.info = res
			this.info.featureContent = res.featureContent.replace(/\n/g,'<br/>')
			this.advertise2 = []
			this.info.featureInfo.forEach((el)=>{
				this.advertise2.push(el.adImg)
			})
			this.getGoodsList(res.categoryId,res.brandId)
			uni.setNavigationBarTitle({
			      title: res.title
			    });
		})
		
		// #ifdef H5
		pageSeo({pageType: 'expoDetailPage'}).then((res)=>{
			document.title = res.pageTitle;
		})
		// #endif
			
		this.clearData();
		this.getList();
		// this.getCode();
		if(options.scene) { //分享进入
		  var splitStr = unescape(options.scene).split(",");
		  // console.log(splitStr)
		  splitStr.forEach((el) => {
			if (el.indexOf('pcode') != -1) {
			  let shareArry = el.split(":");
			  let pcode = shareArry[1];
			  saveShareUid(pcode);
			}
		  });
		}
		// console.log("options",options)
		if(options.pcode){
		  saveShareUid(options.pcode)
		}
		
    },
    onReachBottom() {
		if(this.list.length >= this.count) {
			this.status = 'nomore';
			return ;
		}
		this.pageNum = ++ this.pageNum;
		this.getList()
	},
	async onShareAppMessage(){
		await this.$onLaunched;
		let storeUserInfo = store.state.userInfo;
		return {
			title: this.info.shareTitle,
			path: '/pagesSpecial/crc?pcode='+storeUserInfo.promoterCode+'&specialId='+this.specialId
		}
	},
    methods: {
		toInfo(item){
			uni.navigateTo({
				url: '/pagesCommon/goodsInfo?goodsId='+item.goodsId
			})
		},
		getGoodsList(categoryId,brandId){
			let data = {};
			data.pageSize = 100;
			data.pageNum = 1;
			data.categoryId = categoryId;
			data.brandId = brandId;
			data.goodsShow = 1
		    pcGoodsList(data).then((res)=>{
				this.goodslist = res.list;
			})
		},
		getCode(){
			shareCode({shareType:'shareSpecialYTHR'}).then((res)=>{
				this.shareTitle = res.shareTitle;
				// this.qrCode = res.qrCode;
				// this.shareImage = res.shareImage;
			})
		},
		closePop(){
			this.show2 = false
			this.vidoSrc = ''
		},
		toaddInquiry(btnType){
			let text='';
			let btnType2=btnType?btnType:'';
			if(this.sourceFrom=='card'){
				text=this.info.title+'&'+ btnType2;
				log.info(text);
			}
			this.judgeLogin(() => {
				// getApp().globalData.specialId = this.specialId;
				uni.navigateTo({
				  url: '/pagesSpecial/addInquiry?specialId='+this.specialId
				});
			})
		},
		//上传图片
		handleAfterRead2(event) {
			if(event.file.size>2*1024*1000){
				uni.showToast({
					title:'图片大小超过2M，请重新选择照片',
					icon:'none'
				})		
				return
			}
			uni.showLoading({
				title: '上传中',
			});
			imgCheck(event.file.url).then((res)=>{
				// console.log(res)
				this.form.img.push({url:res})
				// console.log(this.form)
				uni.hideLoading()
			}).catch(()=>{
				uni.hideLoading()
			})
		},
		//删除图片
		deleteImg(event){
			// console.log(event)
			this.form.img.splice(event.index,1)
		},
		
		//清除数据
		clearData(){
				this.pageNum = 1;
				this.list = [];
				this.status = 'loadmore';
				this.count = 0
		},
		getList(){
			let data = {};
			data.pageSize = 10;
			data.pageNum = this.pageNum;
		    data.specialId = this.specialId;
			this.status = 'loading';
		    getInteractionList(data).then((res)=>{
				this.list = this.list.concat(res.list ? res.list : [] );
				this.count = res.count;
				if(this.list.length >= this.count) {
					this.status = 'nomore';
				}else{
					this.status = 'loadmore';
				}
			}).catch(()=>{
				this.status = 'loadmore';
			})
		},
		   
		showVideo(url){
			if(url){
				this.show2 = true
				this.vidoSrc = ''
				this.vidoSrc = url
			}
			
		},
		preview(index){
			uni.previewImage({urls: this.advertise2,current: index});
		},
		
		preview2(ii,index){
			uni.previewImage({urls: this.list[index]['img'],current: ii});
		},
		preview3(iii,ii,index){
			
			uni.previewImage({urls: this.list[index]['reply'][ii]['img'],current: iii});
		},
		showPop(){
			this.judgeLogin(() => {
				this.form = JSON.parse(JSON.stringify(defaultForm))
				this.form.specialId = this.specialId
				this.show = true
			})
			
		},
		closeShow(){
			this.show = false
		},
		
		saveForm(){
		   this.$refs.form.validate().then(res => {
			   this.btnLoading = true;
			   let  data = JSON.parse(JSON.stringify(this.form));
			   data.img = []
			   this.form.img.forEach((el)=>{
				   data.img.push(el.url)
			   })
				 addInteractionData(data).then(()=>{
					   this.btnLoading = false;
					   this.closeShow();
					   uni.showToast({
						 title: '提交成功！',
						 icon: 'none',
						 duration: 2000,
					   });
				 }).catch(()=>{
					   this.btnLoading = false;
				 })
		   }).catch(errors => {
			
		   })
		},
	}
	

  }
</script>

<style lang="scss" scoped>
@import '@/style/common.scss';
.crc-page{
	.crc-con-div{
		.crc-business{
			border-radius: 20rpx;
			margin-top:20rpx;
			background: #eee;
			padding:24rpx;
			.business-title{
				text-align: center;
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
				padding-top:20rpx;
			}
			.business-subTitle{
				font-size: 22rpx;
				color: #858585;
				text-align: center;
			}
			.business-item{
				background: #fff;
				border-radius: 20rpx;
				margin-top:24rpx;
				@include flexbox(flex-start,flex-start);
				padding:20rpx;
				.business-img{
					width:203rpx;
					height:203rpx;
					border-radius: 20px 20px 20px 20px;
					border: 1px solid #EEEEEE;
					overflow: hidden;
				}
				.business-con{
					width:calc(100% - 203rpx);
					padding-left:24rpx;
					.goods-top{
						font-size: 26rpx;
						color: #000000;
						margin-bottom:24rpx;
						font-weight: bold;
					}
					.goods-arrt{
						font-size: 22rpx;
						color: #858585;
					}
				}
				
			}
		}
		padding:0 20rpx;
		margin-top:-110rpx;
		padding-bottom:160rpx;
		.crc-addOrder-div{
			background-size: cover;
			border-radius: 42rpx;
			position: relative;
			z-index: 1;
			height:180rpx;
			@include flexbox(space-between,center);
			padding:0 56rpx;
			.crc-top-left{
				width:380rpx;
				.crc-left-title{
					font-weight: bold;
					font-size: 32rpx;
					color: #FFFFFF;
				}
				.crc-left-subtitle{
					margin-top:14rpx;
					color:#fff;
					font-size: 24rpx;
					line-height: 36rpx;
				}
			}
			.crc-top-right{
				.crc-right-btn{
					width: 168rpx;
					height: 56rpx;
					background: #FFFFFF;
					border-radius: 33rpx;
					font-weight: bold;
					font-size: 26rpx;
					color: #FF6600;
					text-align: center;
					line-height: 56rpx;
				}
			}
			
		}
		.crc-product{
			border-radius: 20rpx;
			margin-top:20rpx;
			padding:36rpx 44rpx;
			background-size: cover;
			.product-title{
				text-align: center;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
			}
			.product-subTitle{
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 36rpx;
				text-align: left;
				margin-top:20rpx;
			}
			.product-list{
				margin-top:30rpx;
				@include flexbox(space-between,flex-start);
				flex-wrap: wrap;
				.product-item{
					width: 300rpx;
					height: 210rpx;
					margin-bottom:34rpx;
					.img{
						width:100%;
						height:100%;
						object-fit: cover;
					}
				}
			}
		}
		.crc-product-report{
			
			border-radius: 20rpx;
			margin-top:20rpx;
		
		}
		.crc-video{
			padding:48rpx 20rpx;
			background: #fff;
			border-radius: 20rpx;
			margin-top:20rpx;
			.crc-block-title{
				@include flexbox(flex-start,center);
				position: relative
			}
			.crc-right-title{
				@include flexbox(flex-start,center);
				position: absolute;
				right:0;
			}
			.video-big{
				height:340rpx;
				position: relative;
				margin-top:20rpx;
				.video-text{
					position: absolute;
					bottom:0;
					width:100%;
					background: rgba(0,0,0,0.3);
					color:#fff;
					height:50rpx;
					line-height: 50rpx;
					font-size: 24rpx;
					@include textoverflow(1);
					padding:0 20rpx;
				}
			}
			.video-list{
				margin-top:20rpx;
				overflow-x: auto;
				width:100%;
				@include flexbox(flex-start,center);
				.video-item{
					width:328rpx;
					height:272rpx;
					position: relative;
					margin-right:16rpx;
					flex-shrink: 0;
					.video-text{
						position: absolute;
						bottom:0;
						width:100%;
						background: rgba(0,0,0,0.3);
						color:#fff;
						height:50rpx;
						line-height: 50rpx;
						font-size: 24rpx;
						@include textoverflow(1);
						padding:0 20rpx;
					}
				}
				.video-item:last-child{
					margin-right:0rpx;
				}
			}
			.video-list2{
				overflow-y: auto;
				height:644rpx;
				.video-item2{
					@include flexbox(flex-start,flex-start);
					border-bottom: 1px solid #ddd;
					padding:24rpx 0;
					width:100%;
					.item2-img{
						width: 282rpx;
						height: 158rpx;
						border-radius: 15rpx;
						overflow: hidden;
					}
					.item2-text{
						padding-left:20rpx;
						width:calc(100% - 282rpx);
						.item2-big-text{
							font-size: 28rpx;
							@include textoverflow(1);
							
						}
						.item2-small-text{
							font-size: 24rpx;
							color: #333333;
							@include textoverflow(2);
							margin-top:10rpx
						}
						.item2-btn{
							font-size: 24rpx;
							color: #8B8B8B;
							margin-top:10rpx;
						}
						
					}
				}
				.video-item2:last-child{
					border-bottom:0
				}	
			}
			.interaction-list{
				.interaction-item{
					padding:34rpx 0;
					margin-bottom:20rpx;
					.interaction-item-top{
						@include flexbox(flex-start,center);
						.item-top-text{
							font-size:28rpx;
							padding-left:10rpx;
						}
					}
					.interaction-item-con{
						font-size: 24rpx;
						color: #333333;
						line-height: 32rpx;
						margin-top:24rpx;
					}
					.interaction-item-imgs{
						
						@include flexbox(flex-start,center);
						flex-wrap:wrap ;
						
					}
					.item-reply{
						margin-top:24rpx;
						border-top:1px solid #eee;
						padding-top:24rpx;
						.reply-con{
							font-size: 24rpx;
							color: #333333;
							line-height: 36rpx;
							.reply-title{
								color: #FF6600;
								padding-right:10rpx;
							}
						}
					}
					
				}
			}
		}
		.crc-bottom{
			position:fixed;
			width:710rpx;
			height:92rpx;
			bottom:20rpx;
			background: url('https://pic.moresu.com/1723883636248') no-repeat;
			background-size: cover;
			border-radius: 42rpx;
			@include flexbox(space-between,center);
			.bottom-text{
				font-weight: bold;
				font-size: 28rpx;
				color: #FFFFFF;
			}
			.bottom-btn{
				background: #FFFFFF;
				border-radius: 33rpx;
				width: 168rpx;
				height: 56rpx;
				font-size: 26rpx;
				color: #FF6600;
				font-weight: bold;
				text-align: center;
				line-height: 56rpx;
				margin-left:340rpx;
			}
			.bottom-img{
				margin-top:-60rpx;
			}
			padding:0 60rpx;
		}
	}
	
}
	.popupTitle{
		font-size:$b-font;
		font-weight: bold;
		text-align: center;
		line-height: 50px;
	}
   .popup-con{
    	padding:0 16px 16px 16px;
    	
    }
    .popup-bottom{
    	background: #fff;
    	margin-top:10px;
    	padding:16px;
    }
    .popup-bottom-fixed{
    	position: fixed;
    	width:100%;
    	padding:16px;
    	box-sizing: border-box;
    	bottom:0;
    }

</style>


    
    
